<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js-事件机制</title>
  </head>
  <body>
    <ul class="father">
        总列表
      <li class="son1">列表1</li>
      <li class="son2">列表2</li>
      <li class="son3">列表3</li>
    </ul>
    <script>
        // 事件冒泡 点击列表1时，先打印子->父；点击列表2和3时，直接打印父；点击总列表时，打印父
    //   document.getElementsByClassName("father")[0].onclick = function () {
    //     console.log("点击了父元素");
    //   };

    //   document.getElementsByClassName("son1")[0].onclick = function () {
    //     console.log("点击了子元素");
    //   };
    //   事件捕获
    // 点击总列表、列表1、列表3时打印父；点击列表2时，先打印父->子
        document.getElementsByClassName('father')[0].addEventListener('click',function(){
            console.log("点击了父元素");
        },true);
        document.getElementsByClassName('son2')[0].addEventListener('click',function(){
            console.log("点击了子元素");
        },true);
    </script>
  </body>
</html>
